require("aui.loading");

let Utils = require("../../framework/js/utils");

Vue.component("aui-grid", {
    template: `<div class="aui-grid">
        <div class="row aui-row aui-grid-row" :class="{'aui-grid-row--active': activerowkey === rowkey}" v-for="row,rowkey in gridrows">
            <div class="aui-grid-row__inner">
                <div class="aui-col aui-grid-item" :class="rowclass" v-for="colitem in row.items">
                    <div class="aui-grid-item__key"> {{colitem.key}}：</div>
                    <div class="aui-grid-item__value" 
                        :class=" colitem.value && colitem.value.appendclass" 
                        :style="colitem.value && colitem.value.appendstyle">
                        <div v-if="_.isString(colitem.value) || _.isNumber(colitem.value)" v-html="colitem.value"></div>
                        <div class="aui-row-appendcomponent" v-if="_.isObject(colitem.value)"><component :is="colitem.value.componentname" :data="colitem.value"></component></div>
                    </div>                        
                </div>                           
                <div v-if="rowcomponentname"><component :is="rowcomponentname" :data="row"></component></div>
            </div>                                            
        </div>  
        <div v-if="empty" class="aui-grid__empty">暂无数据</div>
        <aui-pagination class="aui-grid__pagination" ref="pagination" @pageclick="pageChange"></aui-pagination>     
        <aui-loading ref="loading"></aui-loading>
    </div>`,
    data() {
        var ret = {};
        ret.keys = [];
        ret.rules = {};
        ret.values = [];
        ret.rows = [];
        ret.gridrows = [];
        ret.requestMethods = {};
        ret.auto = true;
        ret.currentPage = 1;
        ret.empty = false;
        ret.rowcomponentname = "";
        ret.activerowkey = "";
        ret.staticmode = false;
        return ret;
    },
    props: {
        rowclass: {
            type: String,
            default: "col-xs-3"
        }
    },
    mounted() {
        this.anuElement = {};
        this.anuElement.loading = $(this.$refs.loading);
    },
    methods: {
        setData(data) {
            var self = this;
            var arr = [];
            var res = [];
            if (!data) {
                console.error("返回值没有data");
            }
            if (data.data) {
                arr = data.data;
            } else {
                arr = [data];
            }
            if (self.handleSetData) {
                arr = self.handleSetData(arr);
            }
            _.forEach(arr, function (v, k) {
                var rowitem = {
                };
                rowitem.items = self.getItem(v);
                rowitem.origin = v;
                rowitem.key = k;
                rowitem.uiactive = false;
                rowitem.parent = self;
                rowitem.$item = v;
                res.push(rowitem);
            });
            self.gridrows = res;
            if (data._meta) {
                self.$refs.pagination.setPagination(data._meta);
            }
        },
        getItem: function(v) {
            var self = this;
            var item = {};
            _.forEach(self.rules, function (rule, rulekey) {
                item[rulekey] = {};
                item[rulekey].origin = v;
                if (rule.hasOwnProperty("value")) {
                    item[rulekey].value = rule.value(v);
                    if (typeof item[rulekey].value === "undefined" ) {
                        if (rule.hasOwnProperty("defaultval")) {
                            item[rulekey].value = rule.defaultval;
                        } else {
                            item[rulekey].value = "";
                        }
                    }
                }
                if (rule.hasOwnProperty("key")) {
                    item[rulekey].key = rule.key(v);
                    if (typeof item[rulekey].key === "undefined" ) {
                        item[rulekey].key = "";
                    }
                }
            });
            return item;
        },
        setRequestMethods(createRequestMethods) {
            this.requestMethods = createRequestMethods;
        },
        refresh(params = {}) {
            var self = this;
            var page = params.page || 1;
            if (params.page) {
                self.currentPage = params.page;
            }
            var search = Object.assign({page: self.currentPage}, params);
            self.activerowkey = "";
            self.showLoading();
            if (!self.staticmode) {
                self.requestMethods(search).then(function (response) {
                    if (self.beforeSetData) {
                        self.beforeSetData(response);
                    }
                    self.setData(response.data);
                    if (response.data._meta && response.data._meta.pageCount < 1) {
                        self.empty = true;
                        self.hideLoading();
                    } else {
                        self.empty = false;
                    }
                    setTimeout(function () {
                        self.hideLoading();
                        if (self.onResponse) {
                            self.onResponse(response);
                        }
                    }, 1000);
                });
            } else {
                var data = self.setStaticData();
                if (data.length < 1) {
                    self.empty = true;
                    self.hideLoading();
                } else {
                    self.empty = false;
                    self.setData(data);
                    setTimeout(function () {
                        self.hideLoading();
                    }, 0);
                }
            }
        },
        registerRowComponent(component) {
            var self = this;
            self.rowcomponentname = Utils.uniqueSelector("grid_");
            Vue.component(self.rowcomponentname, component);
        },
        pageChange(page) {
            var self = this;
            if (self.auto) {
                self.refresh({
                    page: page
                });
            }
            self.$emit("pagechange", page);
        },
        setRules (rules) {
            this.rules = rules;
        },
        hideLoading() {
            if (this.$refs.loading) {
                this.$refs.loading.hideLoading();
            }
        },
        showLoading() {
            if (this.$refs.loading) {
                this.$refs.loading.showLoading();
            }
        }
    }
});